import QtQuick 1.0
//import ShellInvoker 1.0


FocusScope {
    id: etapeItem
    property string sPath : "/dsdss/fsdfds/f/dsfsdf//sdfdsfdfqdsf"
	signal choice(string index)
	width: 500
    height: 700
    focus: true
    function loadData(json){
		dataModel.clear();
		sPath=json.path;
		var dt = json.data
		for(var i=0;i<dt.length;i++){
			
			dataModel.append({"textCt":dt[i]});
		}
	}
	
    Component.onCompleted: {
	  loadData({"path":"/", "data": ["Info","Series ","Emissions","Jeunesse"]});
	}
    
    ListModel {
	     id: dataModel
	}
		  
    
	
    Rectangle {
		color: "#003300"
		anchors.fill:parent
		focus: true  
		ListView {
			  id:view
			  width: parent.width
			  height: 200
			  anchors.centerIn: parent
			  focus: true
			  model: dataModel
			  orientation : ListView.Vertical
			  spacing : 25
			  delegate: Rectangle  {
							width: view.width - 400
							height: 50
							anchors.horizontalCenter : parent.horizontalCenter
							color:'#ccff33'
							id:rectItem
							radius:5
							Keys.onReturnPressed : {
								etapeItem.choice(index);
								event.accepted = true;
						    }
							Rectangle  {
								opacity: 0.5
								anchors.fill:parent
								radius:5
								gradient: Gradient  {
									GradientStop  { position: 0.1; color: "#ccff33" }
									GradientStop  { position: 0.5; color: "#33001f" }
									GradientStop  { position: 0.9; color: "#ccff33" }
									}
							}
							Rectangle  {
								anchors.bottom:parent.bottom
								width:parent.width
								height:8
								radius:5
								//color: "#33001f"
								gradient: Gradient  {
									GradientStop  { position: 0.0; color: "#ccff33" }
									GradientStop  { position: 1; color: "#33001f" }
									//GradientStop  { position: 1; color: "transparent" }
									}
							}

							Text {
								anchors.centerIn:parent
								text: textCt
								font.family: "Helvetica"
								font.pointSize: 24
								color: "#33001f"
							}

							states: State {
							name: "active"; when: rectItem.activeFocus
							PropertyChanges { target: rectItem;scale: 1.3 }
							//PropertyChanges { target: label; font.pixelSize: 16 }
							}

							transitions: Transition {
							NumberAnimation { properties: "scale"; duration: 100 }
							}
						}
				
		}
 	 
	}
   
    Rectangle {
		width : parent.width - 20
		height : 50
		anchors.horizontalCenter : parent.horizontalCenter
		anchors.top : parent.top
		anchors.topMargin:10
		color: "#33ccff"
		radius: 5
		Text {
			verticalAlignment:Text.AlignVCenter
			anchors.fill:parent
			text: etapeItem.sPath
			font.family: "Helvetica"
			font.pointSize: 18
			//color: "#33001f"
		}
	}
	
	/*states: State {
		name: "loading"; when : rectItem.activeFocus
		PropertyChanges { target: rectItem;scale: 1.3 }
		//PropertyChanges { target: label; font.pixelSize: 16 }
	}

	transitions: Transition {
		NumberAnimation { properties: "scale"; duration: 100 }
	}   */
}
